﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Areas/Back/lib/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Areas/Back/lib/layui/layui.js"></script>
    <title>新增商品</title>
</head>
<body>
    <div class="layui-container" style="margin-top:50px;margin-bottom:150px;">
        @* onsubmit="return false" 禁止form表单提交，我们要用ajax  *@
        <form class="layui-form" id="addForm" onsubmit="return false">
            @* 商品名字 *@
            <div class="layui-form-item">
                <label class="layui-form-label">商品名字</label>
                <div class="layui-input-block">
                    <input type="text" id="Name" class="layui-input" placeholder="请输入商品名字" />
                </div>
            </div>
            @*封面*@
            <div class="layui-form-item">
                <label class="layui-form-label">上传图片</label>
                <div class="layui-input-block">
                    <input type="file" id="uplaodImg" name="uplaodImg" />
                    @* hidden  隐藏 只用来存值*@
                    <input type="hidden" id="ImgUrl" />
                </div>
            </div>
            @*填充图片的位置*@
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <img id="imgPhoto" class="layui-upload-img" style="width:180px; height:140px" />
                </div>
            </div>
            @* 材质 *@
            <div class="layui-form-item">
                <label class="layui-form-label">材质</label>
                <div class="layui-input-block">
                    <input type="text" id="CaiZhi" class="layui-input" placeholder="请输入材质" />
                </div>
            </div>
            @* 产品售价 *@
            <div class="layui-form-item">
                <label class="layui-form-label">产品售价</label>
                <div class="layui-input-block">
                    <input type="text" id="ProductPrice" class="layui-input" placeholder="请输入产品售价" />
                </div>
            </div>
            @* 市场售价 *@
            <div class="layui-form-item">
                <label class="layui-form-label">市场售价</label>
                <div class="layui-input-block">
                    <input type="text" id="MarketPrice" class="layui-input" placeholder="请输入市场售价" />
                </div>
            </div>
            @* 品牌 *@
            <div class="layui-form-item">
                <label class="layui-form-label">品牌</label>
                <div class="layui-input-block">
                    <input type="text" id="Brand" class="layui-input" placeholder="请输入品牌" />
                </div>
            </div>
            @* 型号 *@
            <div class="layui-form-item">
                <label class="layui-form-label">型号</label>
                <div class="layui-input-block">
                    <input type="text" id="XingHao" class="layui-input" placeholder="请输入型号" />
                </div>
            </div>
            @* 风格 *@
            <div class="layui-form-item">
                <label class="layui-form-label">风格</label>
                <div class="layui-input-block">
                    <input type="text" id="FengGe" class="layui-input" placeholder="请输入风格" />
                </div>
            </div>
            @* 是否组装 *@
            <div class="layui-form-item">
                <label class="layui-form-label">是否组装</label>
                <div class="layui-input-block">
                    <select id="ZuZhuang">
                        <option value="">--请选择--</option>
                        <option value="是">是</option>
                        <option value="否">否</option>
                    </select>
                </div>
            </div>
            @* 颜色 *@
            <div class="layui-form-item">
                <label class="layui-form-label">颜色</label>
                <div class="layui-input-block">
                    <input type="text" id="Color" class="layui-input" placeholder="请输入颜色" />
                </div>
            </div>
            @* 款式 *@
            <div class="layui-form-item">
                <label class="layui-form-label">款式</label>
                <div class="layui-input-block">
                    <input type="text" id="KuanShi" class="layui-input" placeholder="请输入款式" />
                </div>
            </div>
            @* 所属分类 *@
            <div class="layui-form-item">
                <label class="layui-form-label">所属分类</label>
                <div class="layui-input-block">
                    <select id="ProductTypeId">
                        <option value="">--请选择--</option>
                        @foreach (var item in ViewBag.A)
                        {
                            <option value="@item.Id">@item.Name</option>
                        }
                    </select>
                </div>
            </div>
            @* 是否显示在首页 *@
            <div class="layui-form-item">
                <label class="layui-form-label">是否显示在首页</label>
                <div class="layui-input-block">
                    <select id="HomeFlag">
                        <option value="">--请选择--</option>
                        <option value="是">是</option>
                        <option value="否">否</option>
                    </select>
                </div>
            </div>
            @*商品详情*@
            <div class="layui-form-item">
                <label class="layui-form-label">商品详情</label>
                <div class="layui-input-block">
                    <textarea id="Cont" lay-filter="content" style="display: none;">                    
                    </textarea>
                </div>
            </div>
            @*提交和重置按钮*@
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="subAdd"> 立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</body>
<script>
    layui.use(['form', 'layedit', 'upload'], function () {
        var form = layui.form;
        var layedit = layui.layedit;
        var layer=layui.layer;
        //加载图片上传模块
        var upload = layui.upload;
        var $ = layui.$;
        //富文本上传图片
        layedit.set({
            uploadImage: {
                url: '/Back/Product/UploadLayedit', //上传图片的接口url
                type: 'post' //默认post
            }
        });
        var index = layedit.build('Cont'); //富文本编辑器
        form.verify({
            content: function () {
                layedit.sync(index);
            }
        });
        //图片上传
        upload.render({
            elem: "#uplaodImg",
            url: "UploadPhoto",//图片上传地址
            done: function (res) {
                //上传成功
                if (res.success == true) {
                    //存到input 里，好传值
                    $("#ImgUrl").val(res.path);
                    $("#imgPhoto").attr("src", "/" + res.path);
                    layer.msg("上传成功");
                } else {
                    layer.msg("上传失败:" + res.message);
                }
            }
        });
        //开始处理点击提交
        form.on('submit(subAdd)', function () {
            //ajax 请求
            $.ajax({
                url: "AddDel",
                method: "post",
                dataType: "json",
                data: {
                    Name: $("#Name").val(),
                    ImgUrl: $("#ImgUrl").val(),
                    CaiZhi: $("#CaiZhi").val(),
                    ProductPrice: $("#ProductPrice").val(),
                    MarketPrice: $("#MarketPrice").val(),
                    Brand: $("#Brand").val(),
                    XingHao: $("#XingHao").val(),
                    FengGe: $("#FengGe").val(),
                    ZuZhuang: $("#ZuZhuang").val(),
                    Color: $("#Color").val(),
                    KuanShi: $("#KuanShi").val(),
                    ProductTypeId: $("#ProductTypeId").val(),
                    HomeFlag: $("#HomeFlag").val(),  //是否显示在首页没有选项
                    Cont: layedit.getContent(index)
                },
                success: function (res) {
                    if (res.success == true) {
                        layer.msg(res.msg);
                        //关闭当前窗口，并且刷新列表
                        //1.获取弹窗的编号
                        var index = parent.layer.getFrameIndex(window.name);
                        //2.关闭窗口
                        parent.layer.close(index);
                        //3.刷新父级页面
                        parent.location.reload();
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });
    });
</script>
</html>
